<script>
export default {
  name: 'SideCard',
  data () {
    return {
      wenzhang: '',
      zongshu: ''
    }
  },
  async mounted () {
    this.wenzhang = await this.$store.dispatch('getBowen')
    this.zongshu = this.wenzhang.length
  }
}
</script>

<template>
  <el-card class="box-card">
<!--    <img src="@/assets/17.jpg" alt="" class="bjzp">-->
    <div class="touxiang">
      <div class="touxiang1">
        <img src="@/assets/1.jpg" class="touxiang2" alt="">
      </div>
    </div>
    <div style="max-width: 100%;display: flex;flex-direction: column;align-items: center">
      <div class="text" >
        Wdage<svg style="width: 30px;height: 30px;vertical-align: middle" t="1734935943916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8599" width="200" height="200"><path d="M240.509095 826.686272S837.947223 173.437569 812.712599 387.93187 572.546274 878.518189 240.509095 826.686272z" fill="#FFDB26" p-id="8600"></path><path d="M320.851931 854.070044c-27.39639 0-55.516172-2.220647-83.585485-6.60306l-38.726736-6.047898 26.450092-28.923084c1.106118-1.211262 112.029112-122.33325 234.79135-241.873868 227.321902-221.358119 297.137694-246.96285 329.879618-246.962851 16.928227 0 27.118809 7.461037 32.683044 13.719224 10.396665 11.687837 14.076714 29.028229 11.254642 53.005327-12.65937 107.59623-69.904113 222.922666-153.132108 308.505892-68.848465 70.791531-187.11894 155.180318-359.614417 155.180318z m-36.7332-43.470845c12.356554 0.937887 24.624787 1.413139 36.7332 1.413139 157.813131 0 266.267338-77.461883 329.459041-142.445245 76.999248-79.169426 129.899431-185.373546 141.511564-284.091393 1.488843-12.68881-0.054675-18.055373-0.714981-19.670389a10.585925 10.585925 0 0 0-1.455196-0.088322c-8.983526 0-38.499624 6.893258-118.388237 70.711622-49.506126 39.551067-110.792615 94.835922-182.14772 164.319458-85.116386 82.895739-164.479277 166.523282-204.997671 209.85113z" fill="#6E6E96" p-id="8601"></path><path d="M311.632882 832.809874s-286.307834 0.933681-219.890305-173.475421c73.798657-131.619591 617.869761-90.003491 577.565861-542.758903 0 0 8.003581-74.517844 70.139637-74.517844 91.681594 0 78.744643 63.982388 78.744643 63.982388 0 174.278723 130.698528 175.090436 130.698528 347.800407 0 291.66178-236.435807 528.08497-528.093382 528.08497 0 0-155.323315-17.756764-124.255287-124.255287 28.826352-98.844021 405.196558-143.934088 457.377554-483.516419" fill="#FFDB26" p-id="8602"></path><path d="M311.632882 933.731545s519.046769 109.152365 632.413316-533.375829" fill="#FFDB26" opacity=".13" p-id="8603"></path><path d="M307.305144 954.314587c8.483039 1.787453 209.82169 42.255377 393.563397-81.953646 136.557166-92.312459 225.340984-249.890067 263.882665-468.346204a21.028853 21.028853 0 0 0-41.418429-7.301218c-36.447208 206.541189-110.351009 344.784869-245.549711 416.0138-319.302105 168.230825-359.942466 50.868796-361.856092 50.469247l0.025235 49.972967a21.028853 21.028853 0 0 0-24.906574 16.242686 21.037265 21.037265 0 0 0 16.259509 24.902368z" fill="#6E6E96" opacity=".13" p-id="8604"></path><path d="M125.111161 786.172083s348.36398 18.917556 614.715433-349.482714" fill="#FFDB26" opacity=".13" p-id="8605"></path><path d="M123.971397 807.16729c3.722107 0.206083 92.594246 44.278353 215.444806 2.115503 112.714652-38.688884 276.634562-165.505485 417.456379-360.270517a21.028853 21.028853 0 0 0-34.079359-24.64161c-255.946376 354.01233-593.190299 340.974441-596.563327 340.802005l0.029441 0.004205a21.033059 21.033059 0 0 0-22.139177 19.859649 21.016236 21.016236 0 0 0 19.851237 22.130765z" fill="#6E6E96" opacity=".13" p-id="8606"></path><path d="M337.759129 897.208633c7.381127-25.306122 56.714817-52.28614 113.837593-83.522398 122.707563-67.111482 308.156813-168.53364 344.141387-402.685713a21.028853 21.028853 0 1 0-41.574043-6.380154c-32.821834 213.611089-200.392352 305.254831-322.746631 372.172847-68.032545 37.208453-121.769677 66.594172-134.033704 108.651878a21.028853 21.028853 0 0 0 40.375398 11.76354zM153.239355 766.131586c-6.771291-18.097431-5.282448-40.19455 4.420265-65.668902l-1.3122 2.801043c19.926941-35.538762 65.248325-59.103694 146.945419-86.390734 93.519515-31.232053 199.513346-66.632024 281.752985-135.013648 97.695846-81.226048 138.983896-190.323738 126.244616-333.509198l-0.042057 4.117449c0.252346-2.191206 6.956345-55.734872 49.228545-55.734872 17.538063 0 31.459164 2.582343 41.376371 7.675531a21.033059 21.033059 0 0 0 19.21196-37.414535C805.146417 58.821908 784.756842 54.675018 760.476928 54.675018c-64.087533 0-87.580967 61.029937-91.046522 93.300815l-0.2187 2.052416 0.180848 2.056622c25.781374 289.567307-198.895098 364.598254-379.41939 424.892182-93.675129 31.282522-167.667251 55.99563-195.543099 105.71625l-0.757039 1.345847-0.550956 1.455196c-13.450054 35.320062-14.968338 67.410091-4.508586 95.374261a21.033059 21.033059 0 0 0 39.391247-14.737021h25.234624z" fill="#FFFFFF" opacity=".49" p-id="8607"></path><path d="M311.56559 811.781021h0.012617c-42.2722 0.088321-160.084247-11.418667-197.095028-64.995979-14.547761-21.062499-15.557145-47.222392-3.08283-79.968523l-1.3122 2.801043c19.926941-35.538762 90.482949-59.103694 172.180043-86.390734 93.519515-31.232053 199.513346-66.632024 281.752985-135.013648 97.695846-81.226048 138.983896-190.323738 126.24041-333.509198l-0.037852 4.117449c0.24814-2.191206 6.952139-55.734872 49.22434-55.734872 25.491176 0 43.483462 5.517971 52.029588 15.969311 8.087697 9.887767 6.127808 22.694338 6.102573 22.816306l-0.420577 2.065033v2.102885c0 94.348052 37.065456 143.78268 69.773735 187.400727 31.328785 41.788537 60.920587 81.247077 60.920587 160.403886 0 135.442637-52.744569 262.772342-148.518378 358.550356-95.769603 95.769603-223.103514 148.514172-358.541945 148.514172l2.388878 0.134585c-20.881651-2.447758-79.859172-15.914636-101.367483-48.37898-9.067641-13.685578-10.733127-29.74321-5.088983-49.09396 7.381127-25.310328 56.714817-52.290346 113.837594-83.526604 122.711769-67.111482 308.156813-168.53364 344.141386-402.685714a21.028853 21.028853 0 0 0-41.574043-6.380154c-32.82604 213.611089-200.388147 305.254831-322.746631 372.168642-68.032545 37.212658-121.769677 66.598378-134.033703 108.656084-9.206432 31.564308-5.681996 59.890174 10.48078 84.207939 36.817316 55.398411 127.725048 66.379678 131.577534 66.821284l1.190233 0.134584h1.198644c146.67625 0 284.579263-57.118571 388.293566-160.832874 103.714303-103.710098 160.828668-241.604699 160.828669-388.280949 0-93.170436-35.248564-140.174129-69.327923-185.638509-31.560103-42.087147-61.370605-81.84009-61.370605-162.170309l-0.420577 4.167919c0.660306-3.259472 5.850227-32.577899-14.779078-57.783083C806.988545 31.593749 778.528095 21.028853 739.448075 21.028853c-64.087533 0-87.580967 61.029937-91.046522 93.300815l-0.218701 2.052416 0.180849 2.056622c25.781374 289.567307-198.895098 364.598254-379.41939 424.892182-93.675129 31.282522-167.667251 55.99563-195.543099 105.71625l-0.757039 1.345847-0.550956 1.455197c-17.529652 46.027954-14.89684 86.037449 7.822733 118.892929 57.206892 82.710685 224.684883 83.12285 231.784225 83.097616a21.028853 21.028853 0 0 0-0.134585-42.057706z" fill="#6E6E96" p-id="8608"></path></svg>xian
      </div>
      <div class="tongji">
        <div class="tongji1">
          <div>文章</div>
          <div>{{ zongshu }}</div>
        </div>
        <hr style="margin: 0 30px">
        <div class="tongji1">
          <div>分类</div>
          <div>4</div>
        </div>
      </div>
      <ul>
        <li><a href="https://music.163.com/#/user/home?id=539838108"><svg t="1734934477958" class="icon tubiao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19762" width="200" height="200"><path d="M0 0m256 0l512 0q256 0 256 256l0 512q0 256-256 256l-512 0q-256 0-256-256l0-512q0-256 256-256Z" fill="#F02C2C" p-id="19763"></path><path d="M622.79168 432.52224c0.9472-0.28672 1.95072-0.32768 2.9184-0.11264 29.42976 7.09632 74.48064 59.57632 82.32448 99.45088a168.18176 168.18176 0 0 1 0 78.55104 166.46656 166.46656 0 0 1-35.63008 69.7088c-58.61888 69.38624-167.15776 86.29248-246.49728 44.10368-86.32832-45.53728-138.51648-161.89952-100.608-262.22592 19.3792-51.59936 49.83296-92.91264 98.72384-118.1952a396.32384 396.32384 0 0 0 38.76864-21.13536 32.67072 32.67072 0 0 0 9.1392-9.07776 33.45408 33.45408 0 0 0 0.11776-36.9408 36.05504 36.05504 0 0 0-18.80576-15.34464 35.39968 35.39968 0 0 0-24.1152 0.19456C340.51584 296.192 282.368 359.1168 253.25056 451.38944c-21.66272 68.98688-14.2848 134.144 13.4144 197.94944a288.67584 288.67584 0 0 0 78.1824 104.6016 282.74176 282.74176 0 0 0 115.6608 58.6496 274.92864 274.92864 0 0 0 179.08736-20.57216c102.49728-46.01856 171.71456-166.6048 134.83008-287.5904-19.85536-65.23904-62.39232-108.86656-121.8816-135.5776a303.3344 303.3344 0 0 0-45.04576-13.88032 28.25216 28.25216 0 0 1-13.78304-8.4736 28.98944 28.98944 0 0 1-7.0144-14.73536 237.89056 237.89056 0 0 1-2.97984-28.07296 25.6256 25.6256 0 0 1 2.61632-12.98432 25.1904 25.1904 0 0 1 8.72448-9.856 24.54528 24.54528 0 0 1 25.14944-1.08544 299.04384 299.04384 0 0 1 26.76224 15.47264c24.48896 14.5152 47.55968 8.85248 56.35072-15.07328a39.8592 39.8592 0 0 0-0.88576-24.74496 39.1168 39.1168 0 0 0-15.2832-19.28192 420.9408 420.9408 0 0 0-53.13024-25.84064c-41.984-18.26304-95.97952 11.7248-116.77696 49.7664-13.80864 25.36448-10.12224 52.5568-3.6864 79.75424 0.41472 1.75104 0.9728 3.5328 1.536 5.30432 2.60096 8.2688 5.1968 16.52224-6.55872 21.96992-3.36384 1.57696-6.7072 3.04128-10.04032 4.50048-3.59424 1.57184-7.17312 3.13856-10.75712 4.83328-62.3104 27.19744-99.74784 110.6944-81.69472 179.20512 15.6928 58.61888 85.38112 108.86144 145.81248 87.72608 38.3744-13.1584 87.73632-60.05248 82.16576-110.21824-3.21536-29.7472-10.43456-70.5792-15.30368-93.54752a6.08256 6.08256 0 0 1 1.55648-5.53984c0.69632-0.7168 1.55648-1.23904 2.5088-1.52576z m-80.55808 5.57056c0.78848 1.08544 1.34144 2.3296 1.62304 3.64544 1.67424 7.69024 3.41504 15.39072 5.16096 23.0912 5.05856 22.34368 10.13248 44.75904 13.5168 67.34848 3.22048 20.6592-12.0064 36.608-33.74592 43.14624a42.28096 42.28096 0 0 1-26.53696-3.08736 43.19232 43.19232 0 0 1-19.6096-18.44224c-23.85408-45.4656-2.03776-101.20704 48.9728-119.07584a9.28768 9.28768 0 0 1 7.66976 0.72192c1.15712 0.6656 2.16064 1.56672 2.94912 2.65216z" fill="#FFFFFF" p-id="19764"></path></svg></a></li>
        <li><a href="https://gitee.com/wdagejiaoxian"><svg t="1734934580883" class="icon tubiao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20727" width="200" height="200"><path d="M512 1091.95314569A579.95314569 579.95314569 0 1 1 512-67.95314569a579.95314569 579.95314569 0 0 1 0 1159.90629138z m293.53914217-644.41079531H476.20860587a28.66625549 28.66625549 0 0 0-28.66625549 28.66625549v71.58278826c0 15.82443583 12.84181965 28.66625549 28.58340503 28.66625549h200.49808752c15.90728628 0 28.66625549 12.84181965 28.66625547 28.58340505v14.33312773c0 47.4733075-38.44260851 85.915916-85.915916 85.915916H347.29330663a28.66625549 28.66625549 0 0 1-28.58340503-28.58340503V404.6258176c0-47.4733075 38.44260851-85.915916 85.83306555-85.915916h400.99617502c15.74158539 0 28.58340503-12.84181965 28.58340503-28.6662555v-71.58278827a28.66625549 28.66625549 0 0 0-28.58340503-28.66625548h-400.99617502a214.7483648 214.7483648 0 0 0-214.7483648 214.83121525v400.91332457c0 15.82443583 12.84181965 28.66625549 28.66625548 28.66625548h422.37159097a193.2900984 193.2900984 0 0 0 193.37294885-193.29009842V476.20860587a28.66625549 28.66625549 0 0 0-28.66625548-28.66625549z" fill="#C71D23" p-id="20728"></path></svg></a></li>
        <li><a href="https://blog.csdn.net/njghyhgb?spm=1000.2115.3001.5343"><svg t="1734934739721" class="icon tubiao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25714" width="200" height="200"><path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z" fill="#e33e33" p-id="25715"></path></svg></a></li>
        <li><a href="https://space.bilibili.com/385320062?spm_id_from=333.1007.0.0"><svg t="1734934864106" class="icon tubiao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26704" width="200" height="200"><path d="M204.288 63.488c-8.704 8.192-16.896 20.48-18.944 26.624-3.584 11.776 12.8 62.464 20.48 62.464S235.52 176.128 235.52 184.32c0 16.384-17.92 26.112-47.104 26.112-34.816 0-104.448 27.648-128.512 51.2-9.216 8.704-26.112 33.792-37.888 56.32L0 358.4v469.504l21.504 40.448c24.576 47.616 35.84 59.392 82.944 84.992l40.96 22.528h722.944l40.96-19.968c51.712-24.576 72.704-45.056 95.744-94.72l17.92-38.4v-231.424l0.512-231.424-17.92-36.352c-9.216-20.48-28.16-47.104-42.496-59.904-31.232-30.208-86.528-54.272-122.368-54.272-54.272 0-65.024-22.528-26.624-57.856 20.48-18.432 23.04-25.088 23.04-45.568 0-19.968-3.584-28.16-16.896-41.984-9.216-9.216-22.528-16.896-29.696-16.896-11.776 0-34.304 9.216-40.448 16.896-1.536 1.536-35.84 35.328-75.776 74.24l-73.216 71.168-83.456-0.512c-45.568 0-88.064-2.56-93.696-4.608-5.632-2.56-38.4-31.232-72.704-65.024C249.856 40.448 235.008 32.256 204.288 63.488z m652.8 262.656c5.12 0.512 19.968 9.216 31.744 20.48l21.504 19.968 1.536 217.088c1.024 197.12 0.512 218.112-8.704 236.032-14.336 27.136-34.816 40.448-65.536 41.984-14.336 0.512-173.568 0.512-353.28 0l-326.144-1.536-45.056-45.056V373.248l20.992-22.528c15.872-17.92 25.6-23.552 41.984-25.088 16.384-1.024 634.88-0.512 680.96 0.512z" fill="#FB7299" p-id="26705"></path><path d="M279.04 502.272c-20.48 22.016-20.992 25.088-20.992 66.56 0 39.936 1.024 44.544 17.92 64 29.184 33.28 55.808 32.256 84.48-2.56 11.264-12.8 12.8-22.016 13.312-64 0-47.104-0.512-48.64-19.968-68.096-27.136-27.648-47.616-26.112-74.752 4.096z m393.216-3.584c-18.944 18.944-19.968 20.992-19.968 69.12 0 47.616 0.512 49.664 18.432 67.072 24.576 23.552 35.84 26.624 58.368 13.824 29.184-16.896 39.936-43.52 36.864-90.624-2.56-35.328-4.608-41.984-22.016-59.904-25.088-25.6-45.568-25.6-71.68 0.512z" fill="#FB7299" p-id="26706"></path></svg></a></li>
      </ul>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
$bgd: rgba(0, 0, 0, 0.5);
$hoverbgd: rgba(0, 0, 0, 0.7);
$textcol: white;
.box-card {
  border: 2px solid #003153;
  //width: 400px;
  height: 500px;
  transition: all .5s;
  justify-content: center;
  display: flex;
  max-width: 400px;
  max-height: 500px;
  border-radius: 30px;
  background: url("@/assets/17.jpg") no-repeat;
  background-size: cover;
  position: relative;
  @media (max-width: 1400px) {
    .box-card {
      width: 28vw;
    }
  }
  &::before{
    transition: all .5s;
    content: "";
    background: $bgd;
    position: absolute;
    //border-radius: 30px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  &:hover {
    &::before{
      background: $hoverbgd
    }
  }
  .bkzp{
    z-index: -10;
    position: absolute;
    top: 0;
  }
  .touxiang {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 50px;
    .touxiang1 {
      height: 100px;
      width: 100px;
      border: 2px solid white;
      border-radius: 50%;
      overflow: hidden;
      .touxiang2 {
        height: 100%;
        width: 100%;
      }
    }
  }

  .text {
    font-weight: bold;
    z-index: 1;
    margin-top: 50px;
    color: $textcol;
    max-width: 100%;
    font-size: 18px;
  }
  .tongji{
    margin-top: 30px;
    display: flex;
    color: white;
    z-index: 1;
    .tongji1{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  ul{
    margin-top: 50px;
    padding: 0;
    list-style: none;
    color: $textcol;
    display: flex;
    justify-content: space-evenly;
    li{
      //overflow: hidden;
      z-index: 1;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      //background: black;
      margin: 10px;
      .tubiao{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
